<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <cpn :number1="num1" 
             :number2="num2"
             @num1change="num1change"
             @num2change="num2change"
        ></cpn>
    </div>
    <!--模版-->
    <template id="cpn">
        <div>
            <h2>props: {{number1}} </h2>
            <h2>data: {{dnumber1}} </h2>
            <!--data的数据会跟着改变，props的数据不会跟着改变，需要传回父组件的data中-->
            <input type="text" :value="dnumber1"  @input="num1Input">
            
            <h2>props: {{number2}} </h2>
            <!--虽然可以改变，但是会报错-->
            <!-- <input type="text" v-model="number2"> --> 
            <h2>data: {{dnumber2}} </h2>
            <!--data的数据会跟着改变，props的数据不会跟着改变，需要传回父组件的data中-->
            <!-- <input type="text" v-model="dnumber2"> -->
            <input type="text" :value="dnumber2" @input="num2Input">
        </div>
    </template>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                num1: 1,
                num2: 0,
            },
            methods:{
                num1change(value){
                    // console.log(typeof value);
                    this.num1 = parseFloat(value);
                },
                num2change(value){
                    this.num2 = parseFloat(value);
                },
            },
            components: { //局部组件
                cpn: {
                    template: '#cpn',
                    //如要进行双向绑定，不能绑定到props中，要绑定在data中
                    props: { //父传子
                        number1: Number, //类型限制
                        number2: Number,
                        // num1Change
                    },
                    data() {
                        return {
                            dnumber1: this.number1,
                            dnumber2: this.number2,
                        }
                    },
                    methods: {
                        // 组件emit的方法驼峰命名时，无法监听到该事件
                        num1Input(event) {
                            this.dnumber1 = event.target.value;
                            //子传父
                            this.$emit('num1change',this.dnumber1);
                        },
                        num2Input(event) {
                            // 将input中的value赋值到dnumber中
                            this.dnumber2 = event.target.value;
                            // 为了让父组件修改，发出一个事件
                            this.$emit('num2change', this.dnumber2); 
                        }
                    }
                }
            },
        });
    </script>
</body>

</html>